<template>
	<view class="login-container">
		<view class="login-top">
			<image class="login-img" src="@/static/icon12.png" mode="aspectFit"></image>
		</view>

		<view class="login-form">
			<u-input type="text" placeholder="请输入新昵称" border="surround" v-model="nickname" :maxlength="maxLength">
				<template slot="suffix">
					<view class="count">{{ nickname.length }}/{{ maxLength }}</view>
				</template>
			</u-input>

			<view class="submit-btn">
				<u-button type="primary" @click="handleSubmit" :loading="loading" color="#FF7220"
					shape="circle">保存</u-button>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		update_nickname
	} from '@/api/user.js'
	export default {
		data() {
			return {
				nickname: '', // 输入框的值
				maxLength: 10, // 最大输入长度
				loading: false,
			}
		},

		methods: {

			async handleSubmit() {


				this.loading = true;
				try {
					const response = await update_nickname({
						nickname: this.nickname,

					});
					if (response.code === 1) {
						uni.setStorageSync('nickname', this.nickname)
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						}, 1500)
					} else {
						throw new Error(response.msg)
					}
				} catch (response) {
					console.log('解析失败:', response);
				} finally {
					this.loading = false;
				}
			},

		},

	}
</script>

<style lang="scss" scoped>
	.login-container {
		padding: 40rpx;

		.login-top {
			display: flex;
			justify-content: center;
			margin-bottom: 60rpx;

			.login-img {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.login-form {
			.u-button {
				color: #FF7220;
			}

			.u-input {
				background: #fffaf5;
				padding: 20rpx !important;

				border-color: #F57B00 !important;
			}

			.uni-input-placeholder {
				color: #666666 !important;
			}

			.submit-btn {
				margin-top: 140rpx;

				.u-button {
					width: 30%;
				}
			}


		}
	}
</style>